<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Big Data Harbour首页</title>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>
</head>
<body class="page-index">
<c:import url="/layout/header"/>

<div class="main1">
  <div class="info">
    <h1 id="main1-title">设计 开发 市场</h1>
    <p id="main1-sub">
                我们设计 我们开发 我们有数据市场
      <br> 前沿 优秀 智慧 大量
    </p>
    <button id="main1-btn" class="btn">马上体验</button>
  </div>
</div>
<div class="main2">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div id="carousel-generic" class="carousel slide" data-ride="carousel"> 
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <c:forEach var="article" items="${sliderList }" varStatus="status">
		      <li data-target="#carousel-generic" data-slide-to="${status.index }" <c:if test="${status.index == 0 }">class="active"</c:if>>${article.title }</li>
		    </c:forEach>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <c:forEach var="article" items="${sliderList }" varStatus="status">
	          <div class="item <c:if test="${status.index == 0 }">active</c:if>">
	            <a href="${contextPath }/article/view/${article.id}" target="_blank">
	              <img src="${contextPath }${article.url }" style="width:600px;height:355px;">
	              <span class="carousel-caption"></span>
	            </a>
	          </div>
		    </c:forEach>
          </div>
	      <a class="left carousel-control" href="#carousel-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a> 
	      <a class="right carousel-control" href="#carousel-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
        </div>
      </div>
      <div class="col-md-6">
        <ul class="list-group news-list">
          <c:forEach var="article" items="${articleList }" varStatus="status">
            <li class="list-group-item">
              <span class="dot">●</span>
              <a href="${contextPath }/article/view/${article.id}" target="_blank">${article.title }</a>
              <span class="badge"><fmt:formatDate value="${article.createTime }" pattern="yyyy-MM-dd" /></span>
            </li>
          </c:forEach>
        </ul>
      </div>
    </div>
    <div class="text-center">
      <button class="more-news">查看更多</button>
    </div>
  </div>
</div>
<div class="main3">
  <div class="container service">
    <h2>我的服务</h2>
    <p class="line"></p>
    <p class="desc">我们是什么？我们是干什么的？我们是大数据 我们提供数据服务 我们结局客户的问题 为移动开发者提供多种精准的数据统计分析，帮助开发者优化产品策略，延长生命周期 </p>
    <div class="row">
      <div class="col-md-3 service-item">
        <p><span class="icon icon-tv"></span></p>
        <h3>免费的API接口</h3>
        <p class="desc2">我们是什么？我们是干什么的？我们是大数据 我们提供数据服务 我们结局客户的问题 为移动开发者提供多种精准的数据统计分析</p>
      </div>
      <div class="col-md-3 service-item">
        <p><span class="icon icon-wrench"></span></p>
        <h3>免费的API接口</h3>
        <p class="desc2">我们是什么？我们是干什么的？我们是大数据 我们提供数据服务 我们结局客户的问题 为移动开发者提供多种精准的数据统计分析</p>
      </div>
      <div class="col-md-3 service-item">
        <p><span class="icon icon-links"></span></p>
        <h3>免费的API接口</h3>
        <p class="desc2">我们是什么？我们是干什么的？我们是大数据 我们提供数据服务 我们结局客户的问题 为移动开发者提供多种精准的数据统计分析</p>
      </div>
      <div class="col-md-3 service-item">
        <p><span class="icon icon-replay"></span></p>
        <h3>免费的API接口</h3>
        <p class="desc2">我们是什么？我们是干什么的？我们是大数据 我们提供数据服务 我们结局客户的问题 为移动开发者提供多种精准的数据统计分析</p>
      </div>
    </div>
  </div>
</div>
<c:import url="/layout/footer"/>
</body>
<script>
// 鼠标移动主背景有几像素的移动
$(function() {
    var x = 0, y = 0;
    var width = $(".main1").width();
    // firefox不支持backgroundPositionX和backgroundPositionY
    $(".main1").css("backgroundPosition", "-10px -10px");
    $(".main1").on({
        'mouseenter': function(e) {
            x = e.pageX;
            y = e.pageY;
        },
        'mousemove': function(e) {
            var that = this;
            var xPos = (x - e.pageX) / (width) * 10 - 10 + "px";
            var yPos = (y - e.pageY) / 750 * 10 - 10 + "px";
            $(this).css("backgroundPosition", xPos + " " + yPos);

        }
    });
});

// 主菜单动画
$(function() {
    var easing = "linear";
    $(".head2 .nav li").each(function() {
        if($(this).hasClass("active")) return;
        var w = $(this).find("a").width();
        var span = $(this).find("a>span");
        $(this).on({
            mouseenter: function() {
                if(span.css("right") == "auto") {
                    span.css("right", w + "px");
                };
                span.animate({
                    left: 0,
                    right: 0
                }, 300, easing);
            },
            mouseleave: function() {
                span.animate({
                    right: w
                }, 100, easing);
            }
        });
    });
});

// 三段文字从上向下进入
$(function() {
    setTimeout(function() {
        $("#main1-title").animate({
            top: 180,
            opacity: 1
        }, 1000);
    }, 500);
    setTimeout(function() {
        $("#main1-sub").animate({
            top: 300,
            opacity: 1
        }, 1200);
    }, 1100);
    setTimeout(function() {
        $("#main1-btn").animate({
            top: 485,
            opacity: 1
        }, 1400);
    }, 1800);

    /*$("#main1-title").addClass("fadeInDown animated");
    $("#main1-sub").addClass("fadeInDown animated");*/
});

</script>
</html>